<template>
  <div>
    <BasicForm @register="registerForm">
      <template #email="{ model, field }">
        <span>{{ model[field] }}</span>
      </template>

      <template #verifyCode="{ model, field }">
        <a-row :gutter="8">
          <a-col :sm="14" :md="14" :lg="14" :xl="14">
            <a-input v-model:value="model[field]" class="input-verify-code" placeholder="请输入验证码" />
          </a-col>
          <a-col :sm="8" :md="8" :lg="8" :xl="8">
            <a-button type="primary" style="width: 100%" @click="handleSend" :disabled="disabled">{{ butName }}</a-button>
          </a-col>
        </a-row>
      </template>
    </BasicForm>
    <ManMachineVerifyModal @register="registerManMachineVerifyModal" @submit="handleManMachineVerifySuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, provide, watch, nextTick } from "vue"
  import { BasicForm, useForm } from "/@/components/Form/index"
  import { emailFormSchema } from "./verify.data"
  import { useUserStore } from "/@/store/modules/user"
  import { TaskCode } from "/@/api/sys/model/msgPushModel"
  import { useSendCaptchaMsg } from "./useSendCaptchaMsg"
  import ManMachineVerifyModal from "./ManMachineVerifyModal.vue"

  // 声明Emits
  const emit = defineEmits(["register"])
  const userStore = useUserStore()

  const formData = ref({})
  provide("verifyData", formData)
  //表单配置
  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
    schemas: emailFormSchema,
    labelWidth: "90px",
    showActionButtonGroup: false,
  })

  const props = defineProps({
    bizType: { require: false, type: String },
    verifyType: { require: true, type: String },
    email: { require: false, type: Object },
    // 接口参数
    apiParams: { require: false, type: Object },
    // 发送验证码接口
    api: { require: false, type: Function },
  })

  onMounted(async () => {
    if (props.email?.encryptData && props.apiParams) {
      props.apiParams.encryptData = props.email?.encryptData
    }

    await resetFields()
    await setFieldsValue({ email: props.email?.value || userStore.getUserInfo.email })
  })

  watch(
    () => props.email,
    () => {
      nextTick(async () => {
        if (props.email?.encryptData && props.apiParams) {
          props.apiParams.encryptData = props.email?.encryptData
        }

        await setFieldsValue({ email: props.email?.value || userStore.getUserInfo.email })
      })
    },
    {
      immediate: true,
    }
  )

  const { handleSend, butName, disabled, verifyInfo, registerManMachineVerifyModal, handleManMachineVerifySuccess } = useSendCaptchaMsg({
    taskCode: TaskCode.VERIFY_EMAIl,
    bizType: props.bizType,
    apiParams: ref(props.apiParams),
    api: props.api,
  })

  const getData = async () => {
    let values = await validate()
    return {
      verifyCode: values.verifyCode,
      ...verifyInfo,
    }
  }

  defineExpose({ getData, verifyType: props.verifyType })
</script>

<style></style>
